<template>
  <div class="play">
    <div class="header">
      <div class="title">
        <router-link to="/">
          <i class="iconfont icon-shouye left"></i>
        </router-link>
        <div class="music-info">
          <p>{{this.songs.name}}</p>
          <span
            class="author"
            v-for="(item,index) in this.songs.ar"
            :key="index"
            style="margin-right:2px"
          >{{item.name}}</span>
        </div>
        <router-link to="/search">
          <i class="iconfont icon-sousuo right"></i>
        </router-link>
      </div>
    </div>
    <!-- 图片 歌词 -->
    <div class="song-info">
      <div class="song-info-img">
        <img :src="this.songs.al.picUrl" :alt="this.songs.al.name" />
        <keep-alive>
          <LRC
          :durationTime="this.$store.state.durationTime"
          :currentTime="this.$store.state.currentTime"
          :songId="this.$route.params.songId"
        />
        </keep-alive>
      </div>
      <!-- 收藏 -->
      <div class="iconbox">
          <i class="iconfont icon-shoucang2 left"  ref="shoucang" @click="like()"></i>
        <i class="box"></i>
        <i class="iconfont icon-xiazai right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/font/iconfont.css";
import LRC from "../components/LRC.vue";
import bus from "../bus.js";
export default {
  props: {
    songId: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      songs: {
        al: {
          name: "", // 专辑名
          picUrl: 0 // 专辑封面
        },
        name: "", // 歌名
        ar: [], // 歌手列表
        dt: "", // 歌曲时长
        id: null, // 歌曲id
        // fee: 0, // 0: 免费或无版权 1: VIP 歌曲
        url: "" // 音频地址
      },
      currentTime: 0,// 当前时长
      durationTime: 0 // 总时长
    };
  },
  activated(){
    if(this.$route.params.songId){
       // 获取歌名、歌手、时长、id
    let songUrl = this.HOST + `/song/detail?ids=${this.$route.params.songId}`;
    // 获取歌曲音频
    let musicUrl = this.HOST + `/song/url?id=${this.$route.params.songId}`;
    // 发起请求
    this.$axios.get(songUrl).then(res => {
        const songDetail = res.data.songs[0] ? res.data.songs[0] : '';
        this.$axios.get(musicUrl).then(res => {
            const songsUrl = res.data.data[0].url;
            this.songs = songDetail;
            this.songs.url = songsUrl;
            this.songStorage();
            this.transformWithAudio();
          })
          .catch(err => console.log('获取歌曲音频报错', err.response.data.message));
      })
      .catch(err => {
        console.log('获取歌曲信息报错', err.response.data.message);
      });
    }
  },
  components: {
    LRC,
  },
  methods: {
      songStorage(){  // 将歌曲id、歌名存储到本地
        let singer = '';
        this.songs.ar.forEach(item => singer=singer+item.name+' ');
        window.localStorage.setItem('listened'+this.songs.id,this.songs.name+'-'+singer);
      },
      transformWithAudio(){ // 与Audio组件通信
            bus.$emit("musicUrl", this.songs);
            bus.$on("musicTime",res => {
              if (res) {
                console.log(res);
                this.currentTime = res.curr;
                this.durationTime = res.dura;
              }
            });
      },
      like(){
        let singer = '';
        this.songs.ar.forEach(item => singer=singer+item.name+' ');
        window.localStorage.setItem('liked'+this.songs.id,this.songs.name+'-'+singer);
      }
  }
};
</script>

<style scoped>
.header {
  padding: 15px;
}

.music-info {
  flex: 1;
  font-size: 20px;
}

.title {
  display: flex;
  text-align: center;
}

.left {
  font-size: 30px;
}

.right {
  font-size: 30px;
}

.song-info {
  padding: 15px;
}

.song-info-img {
  text-align: center;
}

.song-info-img img {
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.31);
  margin-bottom: 20px;
}

.song-lrc {
  margin-top: 10px;
  min-height: 50px;
}

.iconbox {
  display: flex;
  margin-top: 30px;
}

.iconbox .box {
  flex: 1;
}

.song {
  width: 100%;
  text-align: center;
}

.song audio {
  width: 80%;
}

.author {
  font-size: 12px;
  color: #999;
  margin-right: 2px;
}
</style>